<template>
    <div class="screen-tool-bar">
        <el-dropdown split-button trigger="click" size="mini" @click="() =>{}">
            添加图表
            <el-dropdown-menu slot="dropdown">
                <div class="panel-box" v-loading="panelLoading">
                    <div class="panel-item" v-for="item in panelData" :key="item.menuId">
                        <i v-if="item.attr === '-1'" class="el-icon-back" style="font-size: 40px"
                           @click="gotoNextPanel(item)"></i>
                        <i v-else-if="item.attr === '0' " class="el-icon-data-line" style="font-size: 40px"
                           @click="gotoNextPanel(item)"></i>
                        <i v-else class="el-icon-folder" style="font-size: 40px" @click="gotoNextPanel(item)"></i>
                        {{item.name}}
                    </div>
                </div>
            </el-dropdown-menu>
        </el-dropdown>
        <el-divider direction="vertical"></el-divider>
        <el-dropdown split-button size="mini" placement="bottom-start" style="max-height:600px">
            装饰
            <el-dropdown-menu slot="dropdown">
                <el-tabs tab-position="left" style="height: 200px;">
                    <el-tab-pane :label="pitem.name" v-for="(pitem,pIndex) in elementList" :key="pIndex+'-'">
                        <div style="width: 400px">
                            <el-row :gutter="20">
                                <el-col @click.native="addComponent(citem)" :span="6" v-for="(citem,cIndex) in pitem.child" :key="pIndex+'-'+cIndex">
                                    <div class="grid-content bg-purple">{{citem.name}}</div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-dropdown-menu>
        </el-dropdown>
        <el-divider direction="vertical"></el-divider>
        <el-button size="mini" @click="onSave">保存</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button size="mini" @click="preview">预览</el-button>
        <div class="screen-tool-bar-right">
            <el-button icon="el-icon-full-screen" size="mini" @click="onFull()">{{isFull ? '恢复':'全屏'}}
            </el-button>
            <div class="scale">
                <el-slider v-model="scale" :min="20" @input="onScale" :format-tooltip="formatTooltip"></el-slider>
            </div>
        </div>
    </div>
</template>

<script>
    import ajax from "../../../api/ajax";
    import {QUERY_DASH_BORARD_TREE, QUERY_PANEL_INFO} from "../../../api/url";

    /**
     * 数据大屏工具栏
     */
    export default {
        name: "ToolBar",
        data() {
            return {
                scale: 100,
                isFull: false,
                elementList: [
                    {name: '边框', child: [
                            {name: '边框2',comName: 'borderBox1'},
                            {name: '边框8',comName: 'borderBox8'},
                            {name: '边框9',comName: 'borderBox9'},
                            {name: '边框11',comName: 'borderBox11'},
                    ]},
                    {name: '装饰', child: [
                            {name: '装饰5',comName: 'decoration5'},
                            {name: '装饰6',comName: 'decoration6'},
                            {name: '装饰9',comName: 'decoration9'},
                            {name: '装饰12',comName: 'decoration12'},
                    ]},
                    {name: '数据图', child: [
                            {name: '翻牌器',comName: 'digitalFlop'},
                            {name: '胶囊柱图',comName: 'capsuleChart'},
                            {name: '进度池图',comName: 'percentPond'},
                            {name: '动态环图',comName: 'activeRingChart'},
                            {name: '轮播表',comName: 'scrollBoard'},
                            {name: '排名轮播表',comName: 'scrollRankingBoard'},
                    ]},
                    {   name: '色块',
                        child: [
                            {name: '色块',comName: 'blockText'},
                        ]
                    },
                    {name: '文字', child: [{name: '文字1'}]},
                    {name: '效果', child: [{name: '效果1'}]},
                ],
                panelData: [],
                AllPanelData: [],
                panelLoading:false
            }
        },
        mounted() {
            this.qryMenuData()
        },
        methods: {
            onScale(v) {
                this.emit('onViewChange')
            },
            onFull() {
                this.isFull = !this.isFull
                this.emit('onViewChange')
            },
            onSave(){
                this.$emit('onSave',{})
            },
            preview(){
                this.$emit('onPreview',{})
            },
            emit(eventName) {
                this.$emit(eventName, {
                    scale: this.scale / 100,
                    isFull: this.isFull,
                })
            },
            setParams(params) {
                Object.keys(params).forEach(item => {
                    this[item] = params[item]
                })
            },
            formatTooltip(val) {
                return val + '%';
            },
            gotoNextPanel(data) {
                // 点击的是目录，进入下级
                if (data.attr === '1') {
                    this.panelData = [{
                        attr: '-1',
                        menuId: '000000',
                        name: '返回',
                    }, ...data.children]
                    // 点击的是返回,返回到最顶层
                } else if (data.attr === '-1') {
                    this.panelData = this.AllPanelData
                    // 点击的是仪表盘，查询出所有仪表
                }else if(data.attr === '2'){
                    this.qryPanel(data.menuId)
                    // 点击的是仪表,加入到大屏中
                }else if(data.attr === '0'){
                    this.$emit('onAddPanel',{
                        ...data.data,
                        width:200,
                        length:200
                    })
                }
                this.$forceUpdate()
            },
            /**
             * 查询所有仪表组件目录
             * @param val
             */
            qryMenuData(val = 0) {
                const param = {type: '6', parentId: '0'}
                ajax.post(QUERY_DASH_BORARD_TREE, param).then(res => {
                    const treeSort = (arr = []) => {
                        const sort = []
                        arr.forEach(item => {
                            // 目录排在前方
                            if (item.attr === '1') {
                                sort.unshift({...item, children: treeSort(item.children || [])})
                                // 数据大屏不展示
                            } else if (item.attr !== '3') {
                                sort.push(item)
                            }
                        })
                        return sort;
                    }
                    this.panelData = this.AllPanelData = treeSort(res.data)
                })
            },
            // 查询仪表盘
            qryPanel(boardId) {
                let param = {
                    boardId: boardId
                }
                const includeList = [{
                    attr: '-1',
                    menuId: '000000',
                    name: '返回',
                }]
                this.panelLoading = true
                ajax.post(QUERY_PANEL_INFO, param).then(res => {
                    res.data.forEach(item => {
                        if(item.unitType === '1'){
                            includeList.push({
                                attr: '0',
                                menuId: '111111111',
                                name: item.titleId,
                                data:item
                            })
                        }
                    })
                    this.panelData = [...includeList];
                }).finally(() => this.panelLoading = false)
            },
            addComponent(data){
                console.log('装饰')
                this.$emit('onAddComponent',{
                    name:data.name,
                    componentName:data.comName,
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
    .screen-tool-bar {
        height: 50px;
        line-height: 50px;
        padding: 0 10px
        position relative

        &-right {
            position absolute
            right 10px
            top 0
            height 100%
            width 200px
            display flex
            align-items center
            justify-content space-between

            .scale {
                width 100px
            }
        }
    }

    .panel-box {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        width: 400px
        max-height 400px
        overflow-y auto

        .panel-item {
            width: 25%;
            margin-bottom 10px
            display: flex;
            flex-direction: column
            font-size 12px
            text-align center

            i {
                color #eb5965
                cursor pointer
            }
        }
    }
</style>
